helper-center/packages/web/src/pages/showdoc/[id].vue

<template>
  <div class="max-w-screen-xl content my-0 mx-auto text-size-base overflow-hidden">
    <div v-if="detail">
      <div class="breadcrumb my-[30px] pb-[20px] bb-1px_#EBEBEB" role="navigation">
        <n-breadcrumb separator=">" v-if="breadcrumb">
        <!-- {{ breadcrumb }} -->
          <template v-for="(bread, index) in breadcrumb" :key="index">
            <n-breadcrumb-item :clickable="false"> {{ bread.title }}</n-breadcrumb-item>
          </template>
        </n-breadcrumb>
      </div>
      <div v-if="currentCate">
        <n-h2 class="mb-10"> {{ currentCate.title }}</n-h2>
      </div>
      <div class="w-full flex flex-row flex-nowrap">
        <div class="flex-basis-[240px] flex-grow-0 flex-shrink-0 br-1px_#EBEBEB">
          <n-tree
            class="left-tree"
            v-if="mainCategories.children"
            block-line
            :data="mainCategories.children"
            :default-expanded-keys="defaultExpandedKeys"
            :node-props="nodeProps"
            key-field="id"
            label-field="title"
            children-field="children"
            selectable
          />
          <!--          <n-collapse class="br-1px_#EBEBEB py-[10px]">-->
          <!--            <template v-for="(cate, index) in mainCategories.children" :key="index">-->
          <!--              <n-collapse-item :title="cate.title" :name="cate.title">-->
          <!--                <n-collapse v-if="cate.children">-->
          <!--                  <template v-for="(cateChild, cIndex) in cate.children" :key="cIndex">-->
          <!--                    <n-collapse-item :title="cateChild.title" :name="cateChild.title">-->
          <!--                      <div class="px-6">{{ cateChild.title }}</div>-->
          <!--                    </n-collapse-item>-->
          <!--                  </template>-->
          <!--                </n-collapse>-->
          <!--                <div class="px-6" v-else>{{ cate.title }}</div>-->
          <!--              </n-collapse-item>-->
          <!--            </template>-->
          <!--          </n-collapse>-->
        </div>
        <div class="flex-1 w-[calc(100%-80px)] px-[40px] mb-[120px] overflow-hidden">
          <div class="bb-1px_#EBEBEB color-[#999999]">
            <n-h1 class="font-700"> {{ detail.title }}</n-h1>
            <span class="flex flex-row gap-col-6 pb-[15px]">
              <p>发布于{{ dayjs(detail.createTime).format('YYYY-MM-DD') }}</p>
              <p>阅读 ( {{ detail.readCount }} )</p>
            </span>
          </div>

          <div class="w-full content-html" v-html="detail.content"></div>
        </div>

        <div class="flex-basis-[240px] flex-grow-0 flex-shrink-0">
          <div class="min-h-[200px] bg-[#F5F9FF] b-r-[8px] p-[20px]">
            <n-h4 class="font-600 ext-size-base">主要内容</n-h4>
            <n-anchor :show-rail="false">
              <n-anchor-link
                class="text-size-base color-[#999999]"
                v-for="(item, index) in mainContents"
                :key="index"
                :title="item.text"
                :href="`#my-section-${index + 1}`"
              >
              </n-anchor-link>
            </n-anchor>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<route>
{
name: "showdoc",
meta: {
layout: "base"
}
}
</route>

<script setup lang="ts">
import {
  type ArticleDetailType,
  type ArticleDetailMenuType,
  type CategoryItem,
  getArticleDetail,
  getArticleCount,
  getCategoryTree,
  getArticlesByCateId,
} from '@/api'
import { htmlToTree, createAnchorNames, dayjs, findNodeById, findBreadcrumbPath, type TreeNode } from '@/utils'
import { NH1, NH2, NH4, NBreadcrumb, NBreadcrumbItem, NTree, NAnchor, NAnchorLink } from 'naive-ui'
import type { TreeOption } from 'naive-ui'

const route = useRoute()
const router = useRouter()

const params = route.params as {
  id?: number
}
const breadcrumb = ref<CategoryItem[]>([])
console.log('route', route)
const detail = ref<ArticleDetailType | undefined>()
const mainContents = ref<ArticleDetailMenuType[]>([])
const currentCate = ref<CategoryItem | undefined>()
const mainCategories = ref<CategoryItem[]>([])
const defaultExpandedKeys = ref<number[]>([])

const nodeProps = ({ option }: { option: TreeOption }) => {
  return {
    async onClick() {
      // window.$message.info(`[Click] ${option.title},[ID] ${option.id} `)
      const res = await getArticlesByCateId(+(option.id as string))
      // console.log(res.data)
      if (res.data && res.data.length > 0) {
        const articleId = res.data[0].id
        console.log('articleId', articleId)
        // location.reload()
        router.replace(`/showdoc/${articleId}`)
        setTimeout(() => {
          location.reload()
        }, 500)
      } else {
        window.$message.info(`当前类别没有相关联的文章！`)
      }
    },
  }
}

onMounted(async () => {
  setTimeout(() => {
    const html = document.querySelector('.content-html')
    if (html) {
      createAnchorNames(html)
    }
  }, 1000)
  if (params.id) {
    await getArticleCount(+params.id)
  }
})

watchEffect(() => {
  if (params.id) {
    getArticleDetail(+params.id).then(async (data) => {
      if (data.data) {
        detail.value = data.data
        document.title = detail.value.title
        mainContents.value = htmlToTree(detail.value.content)
        if (detail.value.categoryId) {
          const res = await getCategoryTree(detail.value.categoryId)
          if (res.data) {
            mainCategories.value = res.data as CategoryItem[]
            if (mainCategories.value) {
              debugger
              currentCate.value = findNodeById(
                mainCategories.value as unknown as TreeNode[] ||[],
                String(detail.value.categoryId),
              ) as unknown as CategoryItem
              defaultExpandedKeys.value = [currentCate.value.parentId]
              breadcrumb.value = findBreadcrumbPath(mainCategories.value as unknown as TreeNode[] ||[], String(detail.value.categoryId))
              console.log('breadcrumb', breadcrumb.value)
            }
          }
        }
      }
    })
  }
})
</script>

<style lang="scss" scoped>
:deep(.content-html img) {
  width: 100% !important;
  height: auto;
}

:deep(.left-tree) {
  //--n-node-content-height: 40px !important;
  //--n-node-color-hover: rgba(6,97,201,0.06) !important;
  //border-right: 1px solid #e5e7eb;

  .n-tree-node-wrapper {
    width: 240px;
    font-size: 16px;
  }
}
</style>